﻿module Sustainalytics.Governance {
    export interface JQuery {
        slider(value: any): any;
        slider(option: string, property: string, newValue: any): any;
    }


    var mod = angular.module(governanceModuleName);

    mod.directive('slider',() => {
        return {

            restrict: 'EA',
            scope: {
                ngModel:'='
            },
            replace: true,
            template: '<div></div>',
            require:'ngModel',
            link: function (scope, element, attrs)
            {
                //watch the ngModel to set slider when val in ngModel var changes
                scope.$watch('ngModel', function (newVal, oldVal) {
                    //check when ngModel is not initialized
                    if (newVal !== undefined) {

                        element.slider("value", parseInt(newVal, 10));
                        
                    }
                });
                element.slider({
                    value:scope[attrs.ngModel],
                    min: parseInt(attrs.min),
                    max: parseInt(attrs.max),
                    step: parseInt(attrs.step),
                    slider:(event, ui) => {
                        $(".ui-slider-handle,a").css("text-decoration", "none").css("text-align", "center").text(ui.value);
                    },
                    //slide: (event, ui) => {
                    //    $(ui.handle).text(ui.value);
                    //    scope.$apply(() => {
                    //        scope[attrs.ngModel] = ui.value;
                    //    });
                        


                    //},
                    
                    disabled:true
                });

                element.bind("slide", function (event, ui) {
                    scope.ngModel = ui.value;
                    $(ui.handle).text(ui.value);
                    scope.$apply();
                });

                
                    element.bind("slidechange", function (event, ui) {
                        //$(".ui-slider-handle,a").css("text-decoration", "none").css("text-align", "center").text(ui.value);
                        
                        $(ui.handle).text(ui.value);
                        //scope.onChanged()(ui.value);
                    });
                

                
            }
        };
        
    });
}